<template>
    <div class="box_alar">
        <MoodalTitle :title="'实时报警分析'" />
        <div>
            <!-- 上 -->
            <div class="flix">
                <div class="box_top">
                    <p class="boxTop_p">环卫人员在线情况</p>
                    <p class="boxBop_p">在线 <span class="boxBop_span">{{form.NumberOfPersonnelOnline}}人</span> 总数 <span style="font-weight: 600;">
                        {{form.NumberOfPersonnel}}人</span></p>
                </div>
                <div class="box_but">
                    <p class="boxTop_p">环卫车辆在线情况</p>
                    <p class="boxBop_p">在线 <span class="boxBop_span">{{form.NumberOfEquipmentOnline}}辆</span> 总数 <span style="font-weight: 600;">
                        {{form.NumberOfEquipmentOn}}辆</span></p>
                </div>
            </div>
            <!-- 下 -->
            <div class="flix">
                <div class="box_btnum">
                    <p class="btn_p bt_p">{{form.NumberOfTrashCan}}<i style="font-size: 1.5rem; margin-left: 0.5rem;">个</i></p>
                    <p class="btn_p">垃圾桶满溢数量</p>
                </div>
                <div class="box_btnum">
                    <p class="btn_p bt_yc">{{form.NumberOfAbnormalAlarms}}<i style="font-size: 1.5rem; margin-left: 0.5rem;">次</i></p>
                    <p class="btn_p">异常报警次数</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import {ZongHeZhztaDB} from '@/api/zhangzi/index'
export default {
    components: { MoodalTitle },
    data() {
        return {
           form:{
            NumberOfPersonnelOnline:null, 
            NumberOfPersonnel:null, 
            NumberOfEquipmentOnline:null, 
            NumberOfEquipmentOn:null, 
            NumberOfTrashCan:null, 
            NumberOfAbnormalAlarms:null, 
           }
        }
    },
    mounted(){this.getZongHeZhztaDB()},
    methods:{
        // 实时报警分析
        getZongHeZhztaDB(){
            ZongHeZhztaDB.getRealTimeAlarm().then(res=>{
                if(res.code == 200){
                    this.form = res.data
                }
                console.log(res,'实时报警分析')
            })
        }
    }
}
</script>

<style lang="less" scoped>
.box_alar {
    width: 50rem;
    height:  31.3rem !important;
    margin-bottom: 1.9rem;
}

.flix {
    display: flex;
    justify-content: space-between;
}

.box_top,
 .box_but{
    margin-top: 3rem;
    width:  21.7rem;
    height: 8.2rem;
    background: url(../../../../assets//images//zhangzi/Sanitation/personnel2.png) no-repeat;
    background-size: cover;

    .boxTop_p {
        margin: 1rem 0 1.5rem 1.5rem;
        font-size: 1.4rem;
        color: #fff;
    }

    .boxBop_p {
        margin-left: 1.5rem;
        font-size: 1.4rem;
        color: #fff;

        .boxBop_span {
            margin: 0 0.5rem 0 0.5rem;
            color: #42AD0D;
        }
    }
}

.box_btnum {
    margin-top: 2.5rem;
    width:  20.9rem;
    height:  7.8rem;
    background: url(../../../../assets/images/zhangzi/Sanitation/vehicles2.png) no-repeat ;
    background-size: 100% 100% ;

    .bt_p {
        font-size: 2.8rem !important;
        color: #219EFF !important;
    }

    .bt_yc {
        font-size: 2.8rem !important;
        color: #FF4D40 !important;
    }

    .btn_p {
        margin-top: 0.5rem;
        text-align: center;
        color: #fff;
        font-size: 1.4rem;
    }
}
.box_but {
    width:  21.7rem;
    height: 8.2rem;
    background: url(../../../../assets//images//zhangzi/Sanitation/personnel2.png) no-repeat ;
    background-size: cover;
}
</style>